<template>
  <a-modal
    title="操作"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-steps :current="1">
      <a-step>
        <template slot="title"> Finished </template>
        <span slot="description">This is a description.</span>
      </a-step>
      <a-step title="In Progress" description="This is a description." />
      <a-step title="Waiting" description="This is a description." />
    </a-steps>
  </a-modal>
</template>

<script>
import pick from "lodash.pick";
export default {
  name: "RoleModal",
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      visible: false,
      confirmLoading: false,
      mdl: {},

      form: this.$form.createForm(this),
      permissions: [],
    };
  },
  created() {
    this.loadPermissions();
  },
  methods: {
    add() {
      this.edit({ id: 0 });
    },
    edit(record) {
      this.mdl = Object.assign({}, record);
      this.visible = true;

      // 有权限表，处理勾选
      if (this.mdl.permissions && this.permissions) {
        // 先处理要勾选的权限结构
        const permissionsAction = {};
        this.mdl.permissions.forEach((permission) => {
          permissionsAction[
            permission.permissionId
          ] = permission.actionEntitySet.map((entity) => entity.action);
        });
        // 把权限表遍历一遍，设定要勾选的权限 action
        this.permissions.forEach((permission) => {
          permission.selected = permissionsAction[permission.id] || [];
        });
      }
      this.$nextTick(() => {
        pick(this.mdl, "id", "name", "status", "describe");
        console.log("this.mdl ", this.mdl);
        // this.form.setFieldsValue(this.mdl);
      });
    },
    close() {
      this.$emit("close");
      this.visible = false;
    },
    handleOk() {
      const _this = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        // 验证表单没错误
        if (!err) {
          _this.confirmLoading = true;
          // 模拟后端请求 2000 毫秒延迟
          new Promise((resolve) => {
            setTimeout(() => resolve(), 2000);
          })
            .then(() => {
              // Do something
              _this.$message.success("保存成功");
              _this.$emit("ok");
            })
            .catch(() => {
              // Do something
            })
            .finally(() => {
              _this.confirmLoading = false;
              _this.close();
            });
        }
      });
    },
    handleCancel() {
      this.close();
    },
    onChangeCheck(permission) {
      permission.indeterminate =
        !!permission.selected.length &&
        permission.selected.length < permission.actionsOptions.length;
      permission.checkedAll =
        permission.selected.length === permission.actionsOptions.length;
    },
    onChangeCheckAll(e, permission) {
      Object.assign(permission, {
        selected: e.target.checked
          ? permission.actionsOptions.map((obj) => obj.value)
          : [],
        indeterminate: false,
        checkedAll: e.target.checked,
      });
    },
    loadPermissions() {
      const that = this;
      this.$apis.manage.permissions().then((res) => {
        const result = res.data.data;
        that.permissions = result.map((permission) => {
          const options = JSON.parse(permission.actionData) || [];
          permission.checkedAll = false;
          permission.selected = [];
          permission.indeterminate = false;
          permission.actionsOptions = options.map((option) => {
            return {
              label: option.describe,
              value: option.action,
            };
          });
          return permission;
        });
      });
    },
  },
};
</script>